<template>
  <div class="container-detail">
    <div class="search-button">
      <el-button @click="handleBack" color="#efbf00"
        ><img src="@/assets/images/back.png" alt="" />
        <span style="color: #ffffff">返回</span>
      </el-button>
    </div>
    <div class="container-detail-top">
      <div class="top-left">
        <Card :title="institutiondetail.name">
          <template #content>
            <div class="top-left-content">
              <div class="address">
                <div class="item">
                  <div class="title">详细地址：</div>
                  <div class="text">
                    {{
                      institutiondetail.address
                        ? institutiondetail.address
                        : "-"
                    }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">最近检查：</div>
                  <div class="text">
                    {{ institutiondetail.lastCheckTime || "--" }}
                  </div>
                </div>
              </div>
              <div class="info">
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  label-align="center"
                  align="center"
                  :column="2"
                  class="limited-width"
                >
                  <el-descriptions-item
                    label="社会信用代码"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                    width="400px"
                    >{{
                      institutiondetail.unifiedSocialCreditCode
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="所在区县"
                    label-class-name="desLabel"
                    class-name="desInfo"
                    label-align="center"
                    align="center"
                  >
                    <div class="selectstyle">
                      <el-cascader
                        v-model="institutiondetail.region"
                        placeholder=" "
                        :options="options"
                        filterable
                        clearable
                        disabled
                        style="width: 300px"
                        :props="areaprops"
                      />
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="单位类型"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    {{ institutiondetail.institutionType }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="单位级别"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ institutiondetail.levelName }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="所属行业"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ institutiondetail.industryName }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="所属派出所"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      institutiondetail.policeStationName
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="负责人"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      institutiondetail.leader +
                      " -- " +
                      institutiondetail.leaderPhone
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="更新时间"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ institutiondetail.updateTime }}</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </div>
          </template>
        </Card>
      </div>
      <div class="top-right">
        <div class="card-title">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/title-card.png" alt="" />
            <div class="text">安全诊断</div>
          </div>
          <div class="operate" @click="handlerexplain">指标说明 ></div>
          <div class="operate-explain" v-if="showexplain">
            <div class="contenttext-close" @click="closeexplain">⨉</div>
            <div class="item">指标分值按照近3年检查结果计算；</div>
            <div class="item">
              <span style="color: green">绿色</span> ：大于等于100分；
            </div>
            <div class="item">
              <span style="color: orange">橙色</span>：大于等于80分；
            </div>
            <div class="item">
              <span style="color: red">红色</span>：小于80分；
            </div>
          </div>
        </div>
        <div class="top-right-content">
          <div class="content-left">
            <div class="index">
              <div class="num">
                {{ securitydata.avgg ? securitydata.avgg : "-" }}
              </div>
              <div class="text">安全指数</div>
            </div>
          </div>
          <div class="content-right">
            <div class="right-message">
              <div class="right-title">诊断信息：</div>
              <div class="right-content">
                根据最近3年检查情况，检查综合评分为
                <span
                  :style="{
                    color:
                      securitydata.avgg >= 100
                        ? 'green'
                        : securitydata.avgg >= 80
                        ? 'orange'
                        : 'red',
                  }"
                >
                  {{ securitydata.avgg ? securitydata.avgg : "-" }}
                </span>
                分，被纳入
                <span
                  :style="{
                    color:
                      securitydata.avgg >= 100
                        ? 'green'
                        : securitydata.avgg >= 80
                        ? 'orange'
                        : 'red',
                  }"
                >
                  {{
                    securitydata.avgg >= 100
                      ? "绿色"
                      : securitydata.avgg >= 80
                      ? "橙色"
                      : "红色"
                  }}</span
                >

                目标名单！
              </div>
            </div>
            <div class="right-item">
              <div class="item">
                <img
                  src="@/assets/images/allcity.png"
                  alt=""
                  style="width: 40px; height: 30px"
                />
                <div class="item-content">
                  <div class="content-title">全市排名</div>
                  <div class="content-num">
                    {{
                      securitydata.cityOrderNum
                        ? securitydata.cityOrderNum
                        : "-"
                    }}
                  </div>
                </div>
              </div>
              <div class="item">
                <img
                  src="@/assets/images/industry.png"
                  alt=""
                  style="width: 40px; height: 30px"
                />
                <div class="item-content">
                  <div class="content-title">行业排名</div>
                  <div class="content-num">
                    {{
                      securitydata.industryOrderNum
                        ? securitydata.industryOrderNum
                        : "-"
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-detail-bottom">
      <Card title="检查记录">
        <template #content>
          <div class="checktable">
            <!-- 表格数据 -->
            <el-table
              v-loading="loading"
              :data="checkList"
              border
              height="30vh"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                width="70"
                align="center"
              />
              <el-table-column label="操作" :show-overflow-tooltip="true">
                <template #default="{ row }">
                  <div class="table-operate">
                    <el-icon
                      title="查看详情"
                      color="#007CEF"
                      class="table-icon"
                      :size="20"
                      @click="handleOperate('detail', row)"
                    >
                      <Document />
                    </el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="状态"
                prop="checkStatusName"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="检查单位"
                prop="policeStationName"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="检查人员"
                prop="checkName"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  {{ row.checkName || "--" }}
                </template>
              </el-table-column>
              <el-table-column
                label="检查日期"
                prop="checkDate"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="检查事项"
                prop="allStandard"
                :show-overflow-tooltip="true"
                width="180"
              >
                <template #default="{ row }">
                  {{ row.allStandard }} 项
                </template>
              </el-table-column>
              <el-table-column
                label="不达标"
                prop="projectCode"
                :show-overflow-tooltip="true"
                width="180"
              >
                <template #default="{ row }">
                  <span style="color: #e7350f">{{
                    row.notStandard ? row.notStandard : 0
                  }}</span
                  >项
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination
              class="pagination"
              :total="total"
              v-model:page="params.pageNum"
              v-model:limit="params.pageSize"
              @pagination="getcheckList"
            />
          </div>
        </template>
      </Card>
    </div>
    <!-- 检查记录详情 -->
    <el-dialog
      v-model="showdialog"
      width="1000px"
      append-to-body
      class="dialogBox"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <img src="@/assets/images/title-card.png" alt="" />
          <div class="header-title">检查记录详情</div>
        </div>
      </template>
      <Taskdtl ref="taskdetailref" pageType="check"></Taskdtl>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Card from "@/components/Card";
import Taskdtl from "../../task/taskdtl";
import { getinstitutiondetail, checkInRecordCount } from "@/api/erp/unit";
import { getAreaList } from "@/api/dict";
import { getchecklist } from "@/api/check/check";

const emit = defineEmits(["refreshList"]);

const props = defineProps({});

//行政区划数据
let options = ref([]);

const areaprops = {
  lazy: true,
  checkStrictly: true,
  lazyLoad(node, resolve) {
    const { level } = node;
    let datas = [];
    setTimeout(() => {
      let code = 1;
      if (level != 0) {
        code = node.data.value;
      }
      getAreaList({ pid: code }).then((response) => {
        if (response.data && response.data.length) {
          datas = response.data.map((item, i) => ({
            value: item.value,
            label: item.label,
            leaf: level >= 3,
            // disabled: level == 0, // 这里可以设置为 true 来禁用这个选项
          }));
        } else {
          datas = [];
        }
        resolve(datas);
      });
    }, 200);
  },
};

// 表格加载效果
const loading = ref(false);
// 项目列表
const checkList = ref([]);
// 搜索参数
const params = reactive({
  pageNum: 1,
  pageSize: 10,
});
// 详情弹窗的显隐
let showdialog = ref(false);
//详情组件的引用
const taskdetailref = ref(null);
// 总数
const total = ref(0);

let institutiondetail = ref({});

let securitydata = ref({});

let showexplain = ref(false);

const handlerexplain = () => {
  showexplain.value = true;
};

const closeexplain = () => {
  showexplain.value = false;
};

/**
 * @description: 表格数据接口
 */
const getcheckList = (id) => {
  loading.value = true;
  params.institutionId = id;
  getchecklist(
    { pageNum: params.pageNum, pageSize: params.pageSize },
    params
  ).then((res) => {
    checkList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
};

/**
 * @description: 序号
 * @param {Number} index 索引
 */
function indexMethod(index) {
  const currentPage = params.pageNum;
  const pageSize = params.pageSize;
  const truelndex = (currentPage - 1) * pageSize + index + 1;
  return truelndex;
}

/**
 * @description: 表格操作
 * @param {String} type 类型
 * @param {Object} row  当前行数据
 */
const handleOperate = async (type, row) => {
  switch (type) {
    case "detail":
      showdialog.value = true;
      nextTick(() => {
        taskdetailref.value.handleDetailInfo(row);
      });
      break;

    default:
      break;
  }
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = (row) => {
  getinstitutiondetail(row.institutionId).then((res) => {
    institutiondetail.value = res.data;
    institutiondetail.value.region = [];
    institutiondetail.value.provinceId &&
      institutiondetail.value.region.push(res.data.provinceId);
    institutiondetail.value.cityId &&
      institutiondetail.value.region.push(res.data.cityId);
    institutiondetail.value.zoneId &&
      institutiondetail.value.region.push(res.data.zoneId);
    institutiondetail.value.streetId &&
      institutiondetail.value.region.push(res.data.streetId);
    getcheckList(row.institutionId);
    security(row);
  });
};
/**
 * @description: 处理安全指标
 */

const security = (row) => {
  checkInRecordCount({
    cityId: row.cityId,
    industryId: row.industryId,
    institutionId: row.institutionId,
  }).then((res) => {
    securitydata.value = res.data;
  });
};

const handleBack = () => {
  emit("update:showUnitdetail", false);
};

defineExpose({
  handleDetailInfo,
});
</script>

<style scoped lang="scss">
.container-detail {
  .container-detail-top {
    display: flex;
    .top-left {
      width: 70%;
      .top-left-content {
        margin-top: 15px;
        .address {
          display: flex;
          font-size: 14px;
          color: #666666;
          .item {
            display: flex;
            margin-right: 50px;
          }
        }
        .limited-width {
          :deep(.el-descriptions__label) {
            width: 130px !important;
          }
        }
        .selectstyle {
          margin: auto;
          :deep(.el-icon svg) {
            width: 0;
            height: 0;

            border-top-color: #6f6f6f;
            transform: translateY(4px);
          }
          :deep(.el-input__wrapper) {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
          }
          :deep(.el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }
          :deep(.el-select .el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }
          :deep(.el-select .el-input.is-focus .el-input__wrapper) {
            box-shadow: none !important;
          }
          :deep(.el-input.is-disabled .el-input__inner) {
            -webkit-text-fill-color: #303133;
          }
        }
      }
    }
    .top-right {
      background: linear-gradient(-19deg, #00deff, #0096ff);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      width: 30%;
      margin-left: 20px;
      padding: 10px 30px 20px 30px;
      .card-title {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #f6f6f6;
        .text {
          margin-left: 10px;
          font-size: 16px;
          color: #ffffff;
        }
        .operate {
          cursor: pointer;
          font-size: 12px;
          color: #ffffff;
        }
        .operate-explain {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          top: 8px;
          right: 68px;
          z-index: 10;
          background-color: #fff;
          padding: 10px 20px 20px 20px;
          box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.3);
          border-radius: 5px;
          .contenttext-close {
            color: #4d88fd;
            text-align: right;
            cursor: pointer;
          }
          .item {
            font-size: 12px;
            color: #7f7f7f;
          }
        }
      }
      .top-right-content {
        height: calc(100% - 31px);
        display: flex;
        margin-top: 10px;
        .content-left {
          width: 174px;
          background: url("@/assets/images/security.png") no-repeat;
          .index {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
            .num {
              font-size: 20px;
              color: #ffffff;
            }
            .text {
              font-size: 12px;
              color: #ffffff;
            }
          }
        }
        .content-right {
          width: 255px;
          padding: 25px 10px 10px;
          .right-message {
            padding: 0 20px;
            .right-title {
              font-size: 14px;
              color: #ffffff;
            }
            .right-content {
              font-size: 14px;
              color: #ffffff;
              text-indent: 2em;
              margin-top: 20px;
            }
          }
          .right-item {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            .item {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #ffffff;
              .item-content {
                margin-left: 10px;
                .content-num {
                  font-size: 20px;
                }
              }
            }
          }
        }
      }
    }
  }
  .container-detail-bottom {
    margin-top: 20px;
    .checktable {
      margin-top: 20px;
    }
  }
}
</style>
